<template>
	<div>
		<h2 style="margin-bottom: 10px">蒙特卡洛法（基于骑乘人第一落地点计算车速）</h2>
		<div class="title-content">
			<el-form-item label="抛射因子" prop="k">
				<el-input class="ipt" v-model="form.k" />
			</el-form-item>
		</div>
		<h4 style="margin-bottom: 10px">不确定输入参数范围</h4>
		<div class="title">
			<div>上界</div>
			<div>下界</div>
		</div>
		<el-form
			:model="form"
			:inline="true"
			:rules="rules"
			ref="formRef"
			label-width="300px"
			label-position="left"
		>
			<el-form-item label="骑乘人抛出角度 (oDegrees)" prop="oDegrees">
				<el-form-item prop="oDegrees">
					<el-input class="ipt" v-model="form.oDegrees" />
				</el-form-item>
				<el-form-item prop="oDegrees1">
					<el-input class="ipt" v-model="form.oDegrees1" />
				</el-form-item>
			</el-form-item>

			<el-form-item label="道路坡度 (alphaDegrees)" prop="alphaDegrees">
				<el-form-item prop="alphaDegrees">
					<el-input class="ipt" v-model="form.alphaDegrees" />
				</el-form-item>
				<el-form-item prop="alphaDegrees1">
					<el-input class="ipt" v-model="form.alphaDegrees1" />
				</el-form-item>
			</el-form-item>
			<el-form-item label="骑乘人被抛出时的重心高度 (h)" prop="h">
				<el-form-item prop="h">
					<el-input class="ipt" v-model="form.h" />
				</el-form-item>
				<el-form-item prop="h1">
					<el-input class="ipt" v-model="form.h1" />
				</el-form-item>
			</el-form-item>
			<el-form-item label="骑乘人第一落地点与碰撞点之间的距离 (L)" prop="L">
				<el-form-item prop="L">
					<el-input class="ipt" v-model="form.L" />
				</el-form-item>
				<el-form-item prop="L1">
					<el-input class="ipt" v-model="form.L1" />
				</el-form-item>
			</el-form-item>
		</el-form>
		<h4 style="margin-bottom: 10px">输出结果</h4>
		<div class="footer">
			<div>
				<el-form-item label="速度下界 (km/h)">
					<el-input class="ipt" v-model="result" type="number" />
				</el-form-item>
				<el-form-item label="速度上界 (km/h)">
					<el-input class="ipt" v-model="result1" type="number" />
				</el-form-item>
			</div>
			<div style="margin-left: 220px">
				<el-button type="primary" @click="calculateSpeed">不确定分析</el-button>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const formRef = ref("form");
const form = ref({
	g: 9.8,
	oDegrees: null,
	alphaDegrees: null,
	h: null,
	L: null,
	oDegrees1: null,
	alphaDegrees1: null,
	h1: null,
	L1: null,

	k: null
});

const result = ref(null);
const result1 = ref(null);

const rules = {
	g: [{ required: true, message: "请输入重力加速度", trigger: "blur" }],

	oDegrees: [{ required: true, message: "请输入抛出角度", trigger: "blur" }],
	alphaDegrees: [{ required: true, message: "请输入道路坡度", trigger: "blur" }],
	h: [{ required: true, message: "请输入重心高度", trigger: "blur" }],
	L: [{ required: true, message: "请输入落地点与碰撞点距离", trigger: "blur" }],
	oDegrees1: [{ required: true, message: "请输入抛出角度", trigger: "blur" }],
	alphaDegrees1: [{ required: true, message: "请输入道路坡度", trigger: "blur" }],
	h1: [{ required: true, message: "请输入重心高度", trigger: "blur" }],
	L1: [{ required: true, message: "请输入落地点与碰撞点距离", trigger: "blur" }],
	k: [{ required: true, message: "请输入抛射系数", trigger: "blur" }]
};

const calculateSpeed = () => {
	formRef.value.validate((valid) => {
		if (valid) {
			const { g, k, oDegrees, alphaDegrees, h, L, oDegrees1, alphaDegrees1, h1, L1 } =
				form.value;
			//基于骑乘人第一落地点计算车速
			const toRadians = (degrees) => (degrees * Math.PI) / 180;

			const o = toRadians(oDegrees);
			const o1 = toRadians(oDegrees1);

			const alpha = toRadians(alphaDegrees);
			const alpha1 = toRadians(alphaDegrees1);

			const v =
				(Math.sqrt(g / (2 * Math.cos(o + alpha) * (h * Math.cos(o) + L * Math.sin(o)))) *
					(L * Math.cos(alpha) + h * Math.sin(alpha)) *
					3.6) /
				k;

			const v1 =
				(Math.sqrt(
					g / (2 * Math.cos(o1 + alpha1) * (h1 * Math.cos(o1) + L1 * Math.sin(o1)))
				) *
					(L1 * Math.cos(alpha1) + h1 * Math.sin(alpha1)) *
					3.6) /
				k;

			result.value = v;
			result1.value = v1;
		}
	});
};
</script>
<style scoped>
.ipt {
	width: 120px;
}
.title {
	display: flex;
	align-items: center;
	padding-left: 260px;
	margin-bottom: 20px;
	div {
		margin-right: 170px;
	}
}
.footer {
	display: flex;
	align-items: center;
}
.title-content {
	display: flex;
	align-items: center;
}
</style>
